<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            background-color: red;
            width: 300px;
            height: 300px;
        }
    </style>
</head>

<body>
    <div></div>
    <a href="http://localhost:3001/getData">点我</a>
    <h1>GET Form</h1>
    <form action="http://localhost:3001/getData" method="GET">
        <input type="text" name="username">
        <input type="password" name="password">
        <input type="submit">
    </form>
    <h1>POST Form</h1>
    <form action="http://localhost:3001/postData" method="POST">
        <input type="text" name="username">
        <input type="password" name="password">
        <input type="submit">
    </form>
    <script>
        var div = document.querySelector('div');
        div.addEventListener('click', function () {
            // var xml = new XMLHttpRequest();
            // xml.open('GET', 'http://localhost:3001/getData', true);
            // xml.send();
            // xml.onreadystatechange = function () {
            //   console.log(xml.response);
            // }
            var xml = new XMLHttpRequest();
            xml.open('POST', 'http://localhost:3001/postData', true);
            xml.send('username=eric&password=123123');
            xml.onreadystatechange = function () {
                console.log(xml.response);
            }
        });
    </script>
</body>

</html>